<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Address and Payment Detail</title>
        <link rel="stylesheet" href="${createLinkTo(dir:'css',file:'main.css')}" />
        <script type="text/javascript" src="${createLinkTo(dir:'js')}/prototype.js"></script>
        <script type="text/javascript" src="${createLinkTo(dir:'js')}/scriptaculous.js?load=effects,builder"></script>
		<style type="text/css">
			td {
				align: center;
				vertical-align: top;
			}
			.thead {
				background-color: #CCCCCC;
				font-weight: bold;
			}
			.total {
				color: red;
				height: 30px;
				background-color: #CCCCCC;
			}
		</style>
    </head>

    <body>

	<div class="leftBox">
		<form name="payment_form" method="POST" action="">
			<table>
				<tr><td colspan="2" class="thead">Billing Address:</td></tr>
				<tr><td>FirstName</td><td><input type="text" name="firstname"/></td></tr>
				<tr><td>LastName</td><td><input type="text" name="lastname"/></td></tr>
				<tr><td>Address line1</td><td><input type="text" name="address_line1" size="50"/></td></tr>
				<tr><td>Address line2</td><td><input type="text" name="address_line2" size="50"/></td></tr>
				<tr><td>City</td><td><input type="text" name="city"/></td></tr>
				<tr><td>State</td><td><input type="text" name="state"/></td></tr>
				<tr><td>Zip code</td><td><input type="text" name="zipcode" size="10"/></td></tr>
				<tr><td colspan="2" class="thead">Payment:</td></tr>
				<tr><td>Payment Type</td><td><select name="payment_type"><option value="">Please specify</option><option value="paypal">PayPal</option><option value="visa">Visa Card</option></select></td></tr>
				<tr><td>Paypal Account</td><td><input type="text" name="paypal_account"/></td></tr>
				<tr><td>Cardholder's Name</td><td><input type="text" name="card_holder_name"/></td></tr>
				<tr><td>Card Number</td><td><input type="text" name="card_number"/></td></tr>
				<tr><td>Expire(MMYY)</td>
					<td>
						<select name="expire_month">
							<option value=""></option>
							<option value="01">Jan</option>
							<option value="02">Feb</option>
							<option value="03">Mar</option>
							<option value="04">Apr</option>
							<option value="05">May</option>
							<option value="06">Jun</option>
							<option value="07">Jul</option>
							<option value="08">Aug</option>
							<option value="09">Sep</option>
							<option value="10">Oct</option>
							<option value="11">Nov</option>
							<option value="12">Dec</option>
						</select>
						<select name="Expire_year">
							<option value=""></option>
							<option value="2009">2009</option>
							<option value="2010">2010</option>
							<option value="2011">2011</option>
							<option value="2012">2012</option>
							<option value="2013">2013</option>
							<option value="2014">2014</option>
							<option value="2015">2015</option>
							<option value="2016">2016</option>
							<option value="2017">2017</option>
							<option value="2018">2018</option>
							<option value="2019">2019</option>
							<option value="2020">2020</option>
						</select>
					</td></tr>
				<tr><td>CVV2</td><td><input type="text" name="security_code"/></td></tr>
				<tr><td>Amount of payment</td><td><input type="text" name="amount_of_payment"/></td></tr>
				<tr><td>Remote IP Address</td><td><input type="text" name="remote_ip_address" value="${request.getRemoteAddr()}" disabled/></td></tr>
				<tr><td>Payment Date</td><td><input type="text" name="payment_date" size="40" value="${new Date()}" disabled/></td></tr>
				<tr><td></td><td><input type="submit" name="payment_submit_button" value="Submit"/></td></tr>
			</table>
		</form>
	</div>

	<div class="smallBox">
	"This is an assumed data."<br/>
	User Address Detail: ${userAddress}<br/>
	User Payment Detail: ${userPayment}<br/>
	<br/>
	<g:remoteLink controller="shoppingCart" action="saveOrder" params="[addressDetail:userAddress,paymentDetail:userPayment]" update="success">Click here to confirm and continue</g:remoteLink><br/>
	<br/>
	Otherwise, just go back <a href="/PictureCentral/">Home</a><br/>
	<div id="success"></div>
	</div>

    </body>
</html>
